<template>
  <div class="about">
    <div class="left"></div>
    <div class="top" @scroll="onScroll">
      <div class="top_scoll">
        <div class="top_scoll_swip" v-for="item in data" :key="item.id">
          <img :src="item.img" alt class="top_scoll_swip_img" />
          <p>{{item.name}}</p>
          <p>${{item.price}}</p>
          <p>
            <button>添加购物车</button>
          </p>
        </div>
      </div>
      <div class="bottom">
        <p v-show="isShow">
          <img src="../assets/11.jpg" alt class="bottom_img" />
        </p>
      </div>
    
    </div>
      <button @click="fn">切换</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      isShow: false,
    };
  },
  mounted() {
    this.$axios.get("http://localhost:8080/lcy.json").then((res) => {
      // console.log(res);
      this.data = res.data;
    });
  },
  methods: {
    onScroll(event) {
      // console.log(event.target.scrollTop);
      // 获取可视区域的高度
      var clientHeight = event.target.clientHeight;
      // 获取滚动视图的高度
      var scrollHeight = event.target.scrollHeight;
      // 获取滚动视图的滚动距离
      var scrollToTop = event.target.scrollTop;
      // console.log(111);

      if (scrollHeight - scrollToTop - clientHeight === 0) {
        // console.log(111);
        this.isShow = true;
        setTimeout(() => {
          this.isShow = false;

          this.list = [];
          for (let index = 30; index < 100; index++) {
            this.data.push(index);
            this.refreshing = false;
            // this.$axios.get("http://localhost:8080/lcy.json").then((res) => {
            //   // console.log(res);
            //   this.data = res.data;
            // });
          }
        }, 3000);
      }
    },
    fn(){
      this.$router.push({path:"/"})
    }
  },
};
</script>
<style lang="scss">
.about {
  width: 80%;
  display: flex;
  margin: 0 auto;
}
.left {
  width: 20%;
  height: 85vh;
  border: 1px solid blue;
}
.top {
  width: 60%;
  height: 85vh;
  border: 1px solid blue;
  overflow: scroll;
  .top::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
.bottom {
  width: 100%;
  height: 10vh;
  border: 1px solid red;
}
.top_scoll {
  display: flex;
  justify-content: flex-start;
  // align-items: flex-start;
  flex-wrap: wrap;
}
.top_scoll_swip {
  width: 30%;
  height: 300px;
  border: 1px solid blue;
  margin: 5px;
}
.top_scoll_swip_img {
  width: 100%;
  height: 200px;
}
P {
  text-align: center;
}
button {
  margin: 0 auto;
  border: none;
  // outline: none;
  background: rgb(200, 196, 235);
}
.bottom_img {
  width: 70px;
  height: 60px;
  text-align: center;
}
</style>